<template>
  <div>
    <div class="headerWrap">
      <div class="logoWrap">
          <!-- <img class="logoImg2" src="./images/logo.png" alt="logo"> -->
          <span class="managementTitle">互联网租赁自行车综合治理平台</span>
      </div>
      <div class="userIfoWrap">
        <!-- <el-tooltip :visible-arrow="false" class="item" effect="dark" content="投屏展示页" placement="top-start" v-show="ruleFormEdit.userType != 4 && ruleFormEdit.userType != 2">
          <i v-show="$store.state.btnMenuIds.indexOf(207)>-1" @click="totouping()" class="iconfont icon-huiyitouping" style="margin-right: 15px;font-size: 18px;"></i>
        </el-tooltip> -->
        <!--<i class="iconfont icon-huiyitouping" style="margin-right: 10px;font-size: 18px;"></i>-->
        <el-dropdown @command="handleCommand">
          <div class="elDropdownLink">
            <i class="iconfont icon-yonghu"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="information">个人信息</el-dropdown-item>
            <el-dropdown-item command="changepassword">修改密码</el-dropdown-item>
            <!--<el-dropdown-item command="loginout" >安全退出</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>
        <div class="tuichuHover" @click="closeWindow()">
          <i class="iconfont icon-tuichu3" ></i>
        </div>
      </div>
    </div>
    <!--修改个人信息-->
    <el-dialog :close-on-click-modal="false" @opened="$store.commit('dialogTop')" title="修改用户" :visible.sync="dialogFormVisible">
      <el-form :model="ruleFormEdit" :rules="rulesEdit" ref="ruleFormEdit" label-width="80px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="userName">
          <el-input size='mini' v-model="ruleFormEdit.userName" :disabled="true" auto-complete="off"
                    placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="account">
          <el-input size='mini' v-model="ruleFormEdit.account" :disabled="true" auto-complete="off"
                    placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="角色信息" prop="tag">
          <template>
            <el-input size='mini' v-model="ruleFormEdit.department" :disabled="true" auto-complete="off"
                      placeholder="角色信息"></el-input>

          </template>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile">
          <el-input size='mini' v-model="ruleFormEdit.mobile" auto-complete="off" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input size='mini' v-model="ruleFormEdit.email" auto-cosmplete="off" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item></el-form-item>
        <div style="text-align: center;margin-bottom: 14px;">
          <el-button size='mini' @click="dialogFormVisible = false">取 消</el-button>
          <el-button size='mini' type="primary" v-if="$store.state.btnMenuIds.indexOf(163)>-1" @click="submitFormEdit('ruleFormEdit')">修 改</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!--修改密码-->
    <el-dialog :close-on-click-modal="false" @opened="$store.commit('dialogTop')" title="修改密码" :visible.sync="dialogFormVisibleAdd"
               @close="addDialogCloseAdd('ruleFormAdd')">

      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input size='mini' v-model="ruleFormAdd.oldPassword" type="password" auto-complete="off"
                    placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passwordNew1">
          <el-input size='mini' v-model="ruleFormAdd.passwordNew1" type="password" auto-cosmplete="off"
                    placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="passwordNew2">
          <el-input size='mini' v-model="ruleFormAdd.passwordNew2" type="password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item></el-form-item>
        <div style="text-align: center;margin-bottom: 14px;">
          <el-button  size='mini' type="primary" @click="submitFormAdd('ruleFormAdd')">提交</el-button>
          <el-button size='mini' @click="dialogFormVisibleAdd = false">取 消</el-button>
        </div>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>

  export default {
    props: [ ],
    data () {
      var phoneCheck = (rule, value, callback) => {
        var phnum = /^1[3456789]{1}\d{9}$/
        if (value === '') {
          callback(new Error('手机号码不能为空'));
        } else if (!phnum.exec(Number(this.ruleFormEdit.phone))) {
          callback(new Error('请正确输入手机号！'));
        } else {
          callback();
        }
      };
      var mailCheck = (rule, value, callback) => {
        var isMail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
        if (value === '') {
          callback(new Error('邮箱不能为空'));
        } else if (!isMail.exec(this.ruleFormEdit.email)) {
          callback(new Error('请正确输入邮箱地址！'));
        } else {
          callback();
        }
      };
      var passwordCheck = (rule, value, callback) => {

        if (value === '') {
          callback(new Error('旧密码不能为空'));
        } else {
          callback();
        }
      };
      var passwordNew1Check = (rule, value, callback) => {
        var pwd = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%\^&*?]{6,}$/;
        if (!value) {
          return callback(new Error('新密码不能为空'));
        } else if (!pwd.exec(this.ruleFormAdd.passwordNew1)) {
          callback(new Error('密码至少6位数并包含数字和字母'));
        } else {
          callback();
        }
      };
      var passwordNew2Check = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('新密码不能为空'));
        } else if (!(this.ruleFormAdd.passwordNew1 === this.ruleFormAdd.passwordNew2)) {
          callback(new Error('两次密码输入不一致'));
        } else {
          callback();
        }
      };
      return {
        dialogFormVisible: false,
        dialogFormVisibleAdd: false,
        isShowFull: "",
        ruleFormEdit: {
          count: "",
          phone: "",
          userName: "",
          roleName: "",
          id: "",
          account: " ",
          state: " ",
          email: " ",
          userType: "",
        },
        rulesEdit: {
          phone: [
            {required: true, trigger: 'blur', validator: phoneCheck,}
          ],
          email: [
            {required: true, trigger: 'blur', validator: mailCheck,}
          ]
        },
        rulesAdd: {
          oldPassword: [
            {required: true, trigger: 'blur', validator: passwordCheck,}
          ],
          passwordNew1: [
            {required: true, trigger: 'blur', validator: passwordNew1Check,}
          ],
          passwordNew2: [
            {required: true, trigger: 'blur', validator: passwordNew2Check,}
          ]
        },
        ruleFormAdd: {
          passwordNew1: "",
          passwordNew2: "",
          oldPassword: "",
          password: "",
          count: "",
          phone: "",
          userName: "",
          roleName: "",
          id: "",
          account: " ",
          state: " ",
          email: " "
        }
      }
    },
    created(){
      this.getInfo()//登录就读取
    },
    components: {

    },
    methods: {
      //修改密码
      //关闭回调
      addDialogCloseAdd(formName){
        this.$refs[formName].resetFields();
      },
      totouping(){
        this.$router.push("/bikeBigData")
      },
      //提交回调
      handleDiaSureAdd(){
        this.axios.post(process.env.API_HOST + '/system/updateSysUserPassword', {
          password: this.signPw(this.ruleFormAdd.passwordNew1),
          oldPassword: this.signPw(this.ruleFormAdd.oldPassword),
          sysUserId: this.$store.state.userInfo.sysUserId
        })
          .then(response => {
            if (response.data.code== 200) {
              this.$message({
                type: 'success',
                message: '密码修改成功,请重新登录'
              });
              setTimeout(() => {
                this.axios.post(process.env.API_HOST + "/system/logout", {})
                  .then(response => {
                    this.dialogFormVisibleAdd=false
                    localStorage.clear()
                    this.$router.push("/login")

                  })
              }, 2000)
              this.dialogFormVisibleAdd = false
            }

          })
          .catch(error => {
            console.log(error);
          });
      },

      submitFormAdd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            this.handleDiaSureAdd()
            this.$refs[formName].resetFields();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //修改用户 关闭对话框的并确认回调
      handleDiaSure(){
        this.dialogFormVisible = false
        this.axios.post(process.env.API_HOST + '/system/updateLoginSysUser', this.ruleFormEdit)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });

          })
          .catch(error => {
            console.log(error);
          });
      },
//      修改提交
      submitFormEdit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSure()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      closeWindow(){
        this.$confirm('确定退出吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(process.env.API_HOST + "/system/logout", {})
            .then(response => {
//              localStorage.setItem('isLogin',false);
              localStorage.clear()
              this.$router.push("/login")

            })
        }).catch(() => {
          /*this.$message({
            type: 'info',
            message: '已取消'
          });*/
        });
      },
      handleCommand(command) {
        this.isShowFull = "true"
        if (command == 'information') {
          this.dialogFormVisible = true
        } else if (command == 'changepassword') {
          this.dialogFormVisibleAdd = true
        }
      },
      getInfo(){
        this.ruleFormEdit=this.$store.state.userInfo
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"

  .headerWrap
    position fixed
    left 0px
    top 0
    right 0
    line-height 43px
    z-index 1000
    color white
    background-color $co1
    overflow hidden
    .logoWrap
      display inline-block
      background-color $co1
      height 43px
      line-height 43px
      text-align center
      transition 0.4s width
      vertical-align middle
      .logoImg2
        margin 5px 5px 0 27px
        height 31px
        width 42px
        display inline-block
        vertical-align top
      .managementTitle
        line-height 43px
        vertical-align top
        font-size 18px
        font-weight bold
        color white
        display inline-block
        margin-left 20px
    .hanbugular
      float left
      display inline-block
      line-height 45px
      margin-top 20px
      margin-left 15px
      .el-breadcrumb
        line-height 45px
        font-size 12px
        .itemText
          color: #4b5561
          cursor: pointer
        .el-breadcrumb__separator
          color #8593a2
    .userIfoWrap
      line-height 43px
      overflow hidden
      cursor: pointer
      margin-right 20px
      float right
      display inline-block
      .icon-tuichu3
        font-size 16px
      .tuichuHover
        display inline-block
        margin-left 10px
        &:hover .icon-tuichu3
          font-size 16px
          opacity 0.8
      .elDropdownLink
        display inline-block
        color white
        line-height 43px
        width 20px
        &:hover .iconfont
          opacity 0.8
        .iconfont
          font-size 16px
          color white
      .dropdown-menu
        background-color: #344F78 !important
        color: white;
      .iconfont
        font-size 16px
        color white


</style>
